<template>
<div>
  <Header></Header>
<div style="background: #eee;">
<el-row class="tac">
  <el-col :span="12">
    <h5>个人设置</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-menu-item index="/demo2" @click="goTo('/demo2')">
        <i class="el-icon-menu"></i>
        <span slot="title">基础设置</span>
      </el-menu-item>
      <el-menu-item index="/demo1" @click="goTo('/demo1')">
        <i class="el-icon-document"></i>
        <span slot="title">修改密码</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">绑定账户</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col :span="48">
   <router-view></router-view>
  </el-col>
</el-row>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Header from "./Header/Header"; //顶部登录条
import Footer from "./Footer/index"; //顶部登录条


  export default {
 name: "center",
  components: {
    Header,
    Footer,
  },
      data() {
    return {};
  },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
     goTo(path) {
      this.$router.replace(path);
      }
    }
  };
</script>
<style scoped>
.el-col-12{
  width: 15%;
}
</style>
